<template>
	<view class="container">
		<c-navBar title="任务详情" isPerch></c-navBar>
		<view v-if="workerTaskDetail.useStatus == '1' && workerTaskDetail.startStatus == '3'" class="title"
			:style="{ color: '#FF8A00', background: '#FFF3E5' }">创建待审核</view>
		<view v-if="workerTaskDetail.useStatus == '2'" class="title"
			:style="{ color: '#00693A', background: '#DDF0E7' }">待开始</view>
		<view v-if="workerTaskDetail.useStatus == '3'" class="title"
			:style="{ color: '#4280DD', background: '#E5F2FF' }">进行中</view>
		<view v-if="workerTaskDetail.useStatus == '4' && workerTaskDetail.endStatus == '3'" class="title"
			:style="{ color: '#3F41CF', background: '#a7a3cf' }">提交待审核</view>
		<view v-if="workerTaskDetail.useStatus == '5'" class="title"
			:style="{ color: '#1A1A1A', background: '#F5F5F5' }">已完成</view>
		<view v-if="(workerTaskDetail.useStatus == '1' && workerTaskDetail.startStatus == '1')
		|| (workerTaskDetail.useStatus == '4' && workerTaskDetail.endStatus == '1')
		" class="title" :style="{ color: '#E52600', background: '#FFE5E5' }">已驳回</view>
		<view v-if="workerTaskDetail.useStatus == '6'" class="title"
			:style="{ color: '#999999', background: '#F5F5F5' }">已取消</view>
		<view class="content">
			<view class="title1">{{ workerTaskDetail.project.projectName }}</view>
			<view class="text">任务名称：{{ workerTaskDetail.taskName }}</view>
			<view class="text">任务编号：{{ workerTaskDetail.taskCode }}</view>
			<view class="text">任务地点：{{ workerTaskDetail.taskAddress }}</view>
			<view class="text">任务时间：{{ workerTaskDetail.expectedTime }}</view>
			<view class="text">班组名称：{{ workerTaskDetail.taskGroup }}</view>
			<view class="text">班组组长：{{ workerTaskDetail.groupLeader }}</view>
			<view class="text">工作内容：{{ workerTaskDetail.startMessage }}</view>
		</view>
		<view class="line"></view>

		<view class="content1" v-if="true">
			<view class="title2">点工信息</view>
			<view class="item" v-for="(item,index) in workerTaskDetail.workerList">
				<view class="text f2">{{ item.workerName }}</view>
				<view class="text f3" style="margin-left: 48rpx;">{{ item.workerPhone }}</view>
				<view class="text f1" style="margin-left: 80rpx;"
					:style="{color:item.workType=='普工'?'#00693A':'#4280DD'}">
					{{ item.workType }}
				</view>
			</view>
		</view>

		<view class="content2" v-if="workerTaskDetail.startTime">
			<view class="title2">任务提交信息</view>
			<view class="detail">
				<view class="text">开始任务时间：{{ $fn.formatTime(workerTaskDetail.startTime) }}</view>
				<view class="text">开始任务图片</view>
				<view class="imgs" v-if="workerTaskDetail.startImage">
					<image v-for="(v,i) in workerTaskDetail.startImage.split(',')" :key="i" :src="vuex_imgUrl + v"
						mode="widthFix" style="width: 200rpx;" @click="previewImg(vuex_imgUrl+v)" />
					</image>
				</view>

				<view v-if="workerTaskDetail.endTime">
					<view class="text">结束任务时间：{{ $fn.formatTime(workerTaskDetail.endTime) }}</view>
					<view class="text">结束任务图片</view>
					<view class="imgs" v-if="workerTaskDetail.endImage">
						<image v-for="(v,i) in workerTaskDetail.endImage.split(',')" :key="i" :src="vuex_imgUrl + v"
							mode="widthFix" style="width: 200rpx;" @click="previewImg(vuex_imgUrl+v)">
						</image>
					</view>
					<view class="text">单位：{{ workerTaskDetail.useType }}</view>
					<view class="text">时长：{{ workerTaskDetail.useValue }}</view>
					<view class="text">说明：{{ workerTaskDetail.endMessage }}</view>
				</view>
			</view>
		</view>

		<view class="content3" v-if="workerTaskDetail.useStatus == '6'">
			<view class="title2">取消信息</view>
			<view class="detail">
				<view class="text">取消时间：{{ $fn.formatTime(workerTaskDetail.updateTime) }}</view>
				<view class="text">取消原因：{{ workerTaskDetail.cancelCause }}</view>
			</view>
		</view>

		<view v-if="!['5','6'].includes(workerTaskDetail.useStatus)" class="btn-box">
			<!-- 上报待审核 -->
			<view v-if="workerTaskDetail.useStatus =='1' && workerTaskDetail.startStatus =='3'" class="btn"
				@click="cancel">取消</view>

			<!-- 待开始 -->
			<view v-if="workerTaskDetail.useStatus =='2'" class="cancel" @click="cancel">取消</view>
			<view v-if="workerTaskDetail.useStatus =='2'" class="btn1" @click="save">开始使用</view>

			<!-- 进行中 -->
			<view v-if="workerTaskDetail.useStatus =='3'" class="btn" @click="expiration">结束使用</view>

			<!-- 已驳回 -->
			<view v-if="(workerTaskDetail.useStatus == '1' && workerTaskDetail.startStatus == '1')
		|| (workerTaskDetail.useStatus == '4' && workerTaskDetail.endStatus == '1')" class="cancel" @click="rejection">驳回原因
			</view>
			<view v-if="(workerTaskDetail.useStatus == '1' && workerTaskDetail.startStatus == '1')
		|| (workerTaskDetail.useStatus == '4' && workerTaskDetail.endStatus == '1')" class="btn1" @click="reupload">重新上传
			</view>
		</view>

		<view style="height: 150rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				file: [],
				workerTaskDetail: {
					startTime: ''
				},
				id: null,
			}
		},
		onLoad(e) {
			console.log(e);
			this.id = e.id;
		},
		onShow() {
			this.getWorkerTaskDetail();
		},
		methods: {

			// 图片预览
			previewImg(url) {
				console.log(url, 'url');
				uni.previewImage({
					urls: [url]
				})
			},


			getWorkerTaskDetail() {
				this.$api.workerTaskDetail({
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						console.log('点工任务上报详情', res)
						this.workerTaskDetail = res.data;
					}
				})
			},
			// 取消事件
			cancel() {
				uni.navigateTo({ // 1：开始任务 ，2：取消任务
					url: `/pages/home/startTask/startTask?type=${2}` + "&name=worker&id=" + this.workerTaskDetail
						.id,
				})
			},
			// 开始使用事件
			save() {
				uni.navigateTo({ // 1：开始任务 ，2：取消任务
					url: `/pages/home/startTask/startTask?type=${1}&name=worker&id=${this.workerTaskDetail.id}&projectName=${this.workerTaskDetail.project.projectName}`,
				})
			},
			// 结束使用事件
			expiration() {
				uni.navigateTo({ // 1：开始任务 ，2：取消任务
					url: `/pages/home/startTask/expiration?name=worker&id=${this.workerTaskDetail.id}&projectName=${this.workerTaskDetail.project.projectName}`,
				})
			},
			// 驳回原因事件
			rejection() {
				uni.navigateTo({
					url: `/pages/home/startTask/rejection?name=worker&id=` + this.workerTaskDetail.id,
				})
			},
			// 重新上传事件
			reupload() {

				if (this.workerTaskDetail.useStatus == 1) {
					uni.navigateTo({
						url: `/pages/home/taskCreate?name=worker&id=` + this.workerTaskDetail.id,
					})
				} else {
					uni.navigateTo({
						url: `/pages/home/startTask/reupload?name=worker&id=` + this.workerTaskDetail.id,
					})
				}


			},

		}
	}
</script>

<style scoped lang="scss">
	.title {
		width: 750rpx;
		height: 80rpx;

		font-weight: bold;
		font-size: 32rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.content {
		padding: 34rpx;

		.title1 {
			@include ellipsis(1);
			font-weight: bold;
			font-size: 36rpx;
			color: #1A1A1A;
			margin-bottom: 4rpx;
		}


		.text {
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			overflow-wrap: break-word
		}
	}

	.content1,
	.content2,
	.content3 {
		padding: 32rpx 0;

		.item {
			margin: 0 34rpx;
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;
			gap: 10rpx;

			.f2 {
				flex: 2;
			}

			.f3 {
				flex: 3;
			}

			.f1 {
				flex: 1;
			}

			.name {
				width: 100rpx;
				@include ellipsis(1);
			}
		}


		.title2 {
			font-weight: bold;
			font-size: 36rpx;
			color: #1A1A1A;
			background: #F7F7F7;
			padding: 18rpx 34rpx;
		}

		.detail {
			padding: 0 34rpx;
			box-sizing: border-box;
		}

		.text {
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			overflow-wrap: break-word
		}

		C .imgs {
			margin-top: 24rpx;
		}
	}

	.line {
		height: 10rpx;
		background: #F7F7F7;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.cancel {
		margin-left: 32rpx;
		text-align: center;
		line-height: 96rpx;
		flex: 1;
		height: 96rpx;
		background: #F5F5F5;
		border-radius: 20rpx 0rpx 0rpx 20rpx;

		font-weight: 500;
		font-size: 36rpx;
		color: #1A1A1A;
	}

	.btn1 {
		margin-right: 32rpx;
		flex: 1;
		height: 96rpx;
		background: linear-gradient(90deg, #208A5B 0%, #00693A 100%);
		border-radius: 0rpx 20rpx 20rpx 0rpx;

		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}
</style>